const information = document.getElementById("info");
information.innerText = `本应用正在使用 Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), 和 Electron (v${versions.electron()})`;

const setButton = document.getElementById("btn");
const titleInput = document.getElementById("title");
setButton.addEventListener("click", () => {
  const title = titleInput.value;
  window.electronAPI.setTitle(title);
});

const counter = document.getElementById("counter");
window.electronAPI.onUpdateCounter((value) => {
  const oldValue = Number(counter.innerText);
  const newValue = oldValue + value;
  counter.innerText = newValue.toString();
});

const message = document.getElementById("message");
window.onmessage = (event) => {
  // event.source === window 意味着消息来自预加载脚本
  // 而不是来自iframe或其他来源
  if (event.source === window && event.data === "main-world-port") {
    const [port] = event.ports;
    // 一旦我们有了这个端口，我们就可以直接与主进程通信
    port.onmessage = (event) => {
      message.innerText = "来自主进程的消息:" + event.data.test;
      port.postMessage(event.data.test * 2);
    };
  }
};

document
  .getElementById("toggle-dark-mode")
  .addEventListener("click", async () => {
    const isDarkMode = await window.electronAPI.toggle();
    document.getElementById("theme-source").innerHTML = isDarkMode
      ? "Dark"
      : "Light";
  });

document
  .getElementById("reset-to-system")
  .addEventListener("click", async () => {
    await window.electronAPI.system();
    document.getElementById("theme-source").innerHTML = "System";
  });

document.getElementById("drag1").ondragstart = (event) => {
  event.preventDefault();
  window.electronAPI.startDrag("drag-and-drop-1.md");
};


// const NOTIFICATION_TITLE = 'Title'
// const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.'
// const CLICK_MESSAGE = 'Notification clicked!'

// new window.Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
//   .onclick = () => { document.getElementById('output').innerText = CLICK_MESSAGE }